<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>体育馆管理系统</title>
  <meta name="description" content="体育馆管理系统">
  <meta name="keywords" content="体育馆管理系统">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/plugins/elementui/index.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/login.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/js/common.js">
  <script src="<%=request.getContextPath()%>/resources/jquery/jquery.js"></script>
  <script src="<%=request.getContextPath()%>/resources/js/vue.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins/elementui/index.js"></script>
  <!-- 引入 echarts.js -->
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/plugins2/elementui/index.css" />
  <script src="<%=request.getContextPath()%>/resources/plugins2/jquery/dist/jquery.min.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins2/healthmobile.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins2/vue/vue.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins2/vue/axios-0.18.0.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins2/elementui/index.js"></script>
  <style scoped>
    body{
      background-image: url("<%=request.getContextPath()%>/resources/img/schoolDoor.jfif");
      /*backdrop-filter: blur(2px);*/
    }
    .login_box{
      width: 450px;
      height: 490px;
      /*background-color: #fff;*/
      border-radius: 18px;
      padding: 30px 50px 30px 30px;
    }
    .login_title{
      text-align: center;
      margin: 30px 30px 40px 30px;
      font-size: 24px;
      color: #666;
    }
    .login_title span{
      margin: 0 20px 0 20px;
      cursor: pointer;
    }
    .login_title span:hover{
      color: #333;
      font-weight: bolder;
    }
    .isActiveTitle{
      color: #333;
      font-weight: bolder;
    }
    .login_agree{
      margin-left: 30px;
    }
    .login_btn{
      width: 100%;
      height: 50px;
      margin: 0 0 0 10px;
      background-color: #0cb95f;
      color: #fff;
    }
  </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app" style="margin:100px auto;width:600px;">
  <div class="login_box">
    <p class="login_title">
      <span :class="isActiveIndex === 0 ? 'isActiveTitle' : ''" @click="accountLogin()">身份验证</span><!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
      <span :class="isActiveIndex === 1 ? 'isActiveTitle' : ''" @click="smsLogin">密码重置</span>
    </p>
    <el-form v-if="isActive" ref="loginForm" :model="loginForm" label-width="80px">
      <el-form-item label="手机号：">
        <el-input id="phone" v-model="loginForm2.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码：">
        <el-input v-model="loginForm2.verifyCode" style="width:60%" placeholder="请输入验证码"></el-input>
        <input id="validateCodeButton" @click="sendValidateCode()" type="button" style="font-size: 12px;width:100px;height:30px" value="获取验证码"></input>
      </el-form-item>
      <el-button class="login_btn" @click="smsLogin()"> 下 一 步 </el-button>

    </el-form>
    <el-form v-else ref="loginForm2" :model="loginForm2" label-width="80px">
      <el-form-item label="请输入密码：">
        <el-input id="loginID" v-model="loginForm.pwd"  type="password" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="请核对密码：">
        <el-input v-model="loginForm.pwd2" id="loginPass" type="password"  placeholder="请输入密码" show-password clearable></el-input>
      </el-form-item>
      <el-form>
        <el-button class="login_btn" @click="changePass()">点 击 修 改</el-button>
      </el-form>

    </el-form>
  </div>

</div>

</body>

<script>
  var vue = new Vue({
    el: '#app',
    data:{
      code:"",//后端传回来的验证码
      isActive: true, // 用于实现切换登录，作为判断
      isActiveIndex: 0,
      loginForm: {
        account:"",
        pwd:"",
        pwd2:""
      },
      loginForm2: {
        phone: "",
        verifyCode:"",
      },
      changePassList:{},
      isChick:false,
    },
    created() {
    },
    methods: {
      //忘记密码
      retrievePWD(){
        alert("忘记密码");
      },

      //是否勾选协议
      itemHandleSelectionChange(selection) {
        this.isClick = selection;
      },
      accountLogin() { // 账号登录
        this.isActive = true;
        this.isActiveIndex = 0;
      },
      smsLogin() { // 短信登录
        //分页参数
        var param = {
          phone:document.getElementById("phone").value,
        };
        //请求后台
        axios.post("<%=request.getContextPath()%>/login/loginPhone",param).then((response)=> {

          if (response.data.success && this.code === this.loginForm2.verifyCode && this.loginForm2.phone === response.data.data.data["telephone"]) {
            this.changePassList = response.data.data.data;
            this.isActive = false;
            this.isActiveIndex = 1;
          }else {
            alert("请完成身份验证");
          }
        });

      },
      //发送验证码
      sendValidateCode() {
        var phone = this.loginForm2.phone;
        if (!checkTelephone(phone)) {
          this.$message.error('请输入正确的手机号');
          return false;
        }
        var obj = {};
        obj["phone"] = document.getElementById("phone").value ;
        axios.post("<%=request.getContextPath()%>/sms/findSms.do" , obj).then((response) => {
          if(response.data.data === "查无此手机号，请注册"){
            this.$message.error('查无此手机号，请检查手机号或注册');
          }else{
            if(response.data.success){
              console.log(response.data.data);
              this.code = response.data.data;
              validateCodeButton = $("#validateCodeButton")[0];
              clock = window.setInterval(doLoop, 1000); //一秒执行一次
            }
            else{
              //验证码发送失败
              this.$message.error('验证码发送失败，请检查手机号输入是否正确');
            }
          }

        });
      },
      changePass(){
        //发送ajax请求，提交模型数据
        if(this.loginForm.pwd2 === this.loginForm.pwd){
          this.changePassList.userPassword = this.loginForm.pwd;
          axios.post("<%=request.getContextPath()%>/record/change.do",this.changePassList).then((response)=> {
            //隐藏编辑窗口
            this.dialogFormVisible4Edit = false;
            if(response.data.success){
              this.$confirm('修改成功，是否返回登录页面?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                location.href ="<%=request.getContextPath()%>/login/toLogin";
              }).catch(() => {
                // 点击取消进行的操作
              })

            }else{
              this.$message.error(response.data.data);
            }
          })
        }else{
          this.$message.error("两次密码不一致");
        }

      }



    }
  })
</script>
</html>
